<template>
  <div class="category">
    <h2>当前求和为：{{ $store.state.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">当前求和为奇数再+</button>
    <button @click="incrementWait">等一等再+</button>
  </div>
</template>

<script>
export default {
  name: "Category",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    // 加
    increment(){
      // 由于没有业务逻辑,也就不需要jia这个action,可以直接通过commit触发mutations中的JIA
      // this.$store.dispatch('jia',this.n);
      this.$store.commit('JIA',this.n);
    },
    // 减
    decrement(){
      // 同上
      // this.$store.dispatch('jian',this.n);
      this.$store.commit('JIAN',this.n);
    },
    // 如果是奇数再加
    incrementIfOdd(){
      this.$store.dispatch('incrementIfOdd',this.n);
    },
    // 等一等再加
    incrementWait(){
      this.$store.dispatch('incrementWait',this.n);
    }
  },
  mounted() {
			console.log(this)
	},
};
</script>

<style scoped>
  * {
    margin-left: 10px;
  }
</style>